<template>
	<view class="bg">
		<u--input placeholder="请输入用户手机号码" prefixIcon="search" @confirm="doSearch" color='#fff' v-model="form.keyword"
			prefixIconStyle="font-size: 22px;color: #858BA3"></u--input>
		<u-tabs :list="list1" lineColor="#F5C7A6" :activeStyle="{ color: '#fff' }" :inactiveStyle="{ color: '#858BA3' }"
			lineHeight="6" @click="click"></u-tabs>
		<view class="list">
			<u-row customStyle="margin-bottom: 10px" justify="space-between">
				<u-col span="3">
					<text class="title">姓名</text>
				</u-col>
				<u-col span="3">
					<text class="title">概况</text>
				</u-col>
				<u-col span="3" style="text-align: right;" @click="paixu">
					<text class="title">注册时间</text>
					<image v-if="form.create_time==0" class="paixu" src="../../static/daoxu.png" mode=""></image>
					<image v-else class="paixu" src="../../static/zhengxu.png" mode=""></image>
				</u-col>
			</u-row>
			<u-row customStyle="margin-bottom: 10px;border-bottom:1px solid #20243C;padding:30rpx 0;"
				justify="space-between" v-for="item in listData" :key="item.member_id">
				<u-col span="3">
					<view class="shuju">
						<image class="tx" src="../../static/tx.png" mode=""></image>
						<view class="xinxi">
							<view class="name">
								{{item.nickname || '--'}}
							</view>
							<view class="renzheng">
								{{item.is_auth || '--'}}
							</view>
						</view>
					</view>

				</u-col>
				<u-col span="3">
					<view class="jifen">
						<text class="jf_title">积分</text> <text class="jf_shu">{{item.point || 0}}</text>
					</view>
					<view class="jifen">
						<text class="jf_title">余额</text> <text class="jf_shu">{{item.amount || 0}}</text>
					</view>
				</u-col>
				<u-col span="3" style="text-align: right;">
					<view class="time">
						{{item.create_time || ''}}
					</view>
					<view class="bzj">
						保证金 {{item.bond || 0}}
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="xiala" v-if="biaoji==0 || listData.length>10">
			<image src="../../static/xiala.png" mode=""></image>下拉加载更多~
		</view>
		<view class="xiala" v-else>
			划不动了x_x
		</view>

	</view>
</template>

<script>
	import {
		getList
	} from '@/api/url.js'
	export default {
		data() {
			return {
				list1: [{
					name: '用户'
				}, {
					name: '司机'
				}],
				form: {
					type: 1,
					page: 1,
					limit: 10,
					create_time: 1,
					keyword: ''
				},
				sum: 0,
				length: 0,
				listData: {},
				scrollTop: 0,
				biaoji: 0
			}
		},
		onLoad(option) {
			this.list()
		},
		mounted() {
			var that = this
			console.log(that.form.limit, 'that.form.limit')
			uni.$on('onReachBottom', () => {
				uni.showLoading({
					title: '加载中'
				});
				if (that.length < that.form.limit) {
					uni.hideLoading()
					this.biaoji = 1
					uni.showToast({
						title: '划不动了喂~！',
						icon: 'none'
					})

					return
				}
				this.biaoji = 0
				that.form.limit = that.form.limit + 10
				var token = uni.getStorageSync('token')
				getList(this.form, token).then(res => {
					console.log(res)
					if (res.data.status == 200) {
						this.listData = res.data.data
						this.length = res.data.count
						uni.hideLoading()
						console.log(this.length)
					}
				}).catch(err => {
					console.log(err)
				})
			})
		},
		onUnload() {
			uni.$off('onReachBottom');
		},
		methods: {
			doSearch() {
				this.list()
			},
			paixu() {
				this.form.create_time == 0 ? this.form.create_time = 1 : this.form.create_time = 0
				console.log(this.form.create_time)
				this.list()
			},
			click(item) {
				console.log('item', item);
				item.index == 0 ? this.form.type = 1 : this.form.type = 2
				this.form.limit = 10
				this.list()
			},
			list() {
				var token = uni.getStorageSync('token')
				getList(this.form, token).then(res => {
					console.log(res)
					if (res.data.status == 200) {
						this.listData = res.data.data
						this.length = res.data.count
						// this.sum = Math.ceil(res.data.count / 10)
						console.log(this.length)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			onReachBottom() {
				console.log('123')
				uni.$emit('onReachBottom');
			},

			onPageScroll(e) {
				console.log(e)
				// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
				this.scrollTop = e.scrollTop;
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100vh;
		background-color: #30324C;
		padding: 47rpx 36rpx;
		box-sizing: border-box;
		position: relative;
	}

	.u-col:last-of-type {
		text-align: right !important;
	}

	.u-tabs__wrapper__nav__item {
		padding-left: 0 !important;
	}

	.bg {

		.u-input {
			background-color: #20243C;
		}

		.xiala {
			bottom: 100rpx;
			left: 0;
			right: 0;
			margin: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #858BA3;
			font-size: 24rpx;

			image {
				width: 48rpx;
				height: 32rpx;
				margin-right: 14rpx;
			}
		}

		.list {
			margin-top: 31rpx;

			.title {
				color: #858BA3;
			}

			.paixu {
				width: 16rpx;
				height: 27rpx;
				margin-left: 16rpx;
			}

			.shuju {
				display: flex;

				.tx {
					width: 60rpx;
					height: 60rpx;
					margin-right: 17rpx;
				}

				.name {
					font-size: 24rpx;
					color: #fff;
					margin-bottom: 8rpx;
				}

				.renzheng {
					color: #F5C7A6;
					font-size: 16rpx;
				}
			}

			.jifen {
				font-size: 23rpx;

				.jf_title {
					color: #858BA3;
					margin-bottom: 10rpx;
					margin-right: 10rpx;
				}

				.jf_shu {
					color: #F5C7A6;
				}
			}

			.bzj {
				color: #858BA3;
				font-size: 19rpx;
			}

			.time {
				color: #F5C7A6;
				font-size: 23rpx;
				margin-bottom: 10rpx;
			}
		}
	}

	.demo-layout {
		height: 25px;
		border-radius: 4px;
	}

	.bg-purple {
		background: #CED7E1;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}
</style>